<template>
  <div class="typing-container">
    <span ref="typingText" class="typing-text"></span>
  </div>
</template>

<script>
import Typed from 'typed.js';
import md from '@/utils/mdToHTML';
export default {
  props: {
    content: {
      type: String,
      required: true
    }
  },
  mounted() {
    new Typed(this.$refs.typingText, {
      strings: [this.content],
      typeSpeed: 20,
      backSpeed: 25,
      loop: false,
      showCursor: false,
      cursorChar: "|",
      smartBackspace: true,
      attr: null,
      bindings: null,
      contentType: 'html'
    });
  }
}
</script>

<style scoped>
.typing-container {
  max-width: 700px;
}
</style>